<template>
  <div class="details-wrap">
      <van-nav-bar class="app-nav-bar">
          <template #left>
              <van-icon @click="rockBack" class="details-wrap-left" name="arrow-left"></van-icon>
          </template>
          <template #right>
              <van-icon class="details-wrap-right" name="ellipsis" />
          </template>
      </van-nav-bar>

      <van-cell-group>
          <van-cell class="details-wrap-title">
            <template #title>
                <span>{{article.title}}</span>
            </template>
          </van-cell>
          <van-cell>
            <div class="article-auth-info">
                <div class="auth-info-wrap">
                    <van-image  class="auth-info-img" round :src="article.avatar"/>
                    <div class="auth-info">
                        <span class="auth-name">{{article.nikeName}}</span>
                        <span class="pub-time">{{rtTime(article.publishTime)}}</span>
                    </div>
                </div>
                    <van-button class="follow-me" size="small" round type="primary">关注</van-button>
            </div>
            <div class="article-content-wrap">
                    <p class="article-content-info" v-html="article.content"></p>
                </div>
          </van-cell>
      </van-cell-group>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, useContext } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute,useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { getArticlesDetail } from 'api/article'
import { rtTime } from 'utils/dayjs'

export default defineComponent({
    props:{

    },
    setup() {
        
        const route = useRoute()
        const router = useRouter()
        const store = useStore()


        let article = reactive({
            title:"",
            nikeName:"",
            avatar:"",
            content:"",
            publishTime:""
        })


        const getArticleDetailById = async () => {
            try{
                const resp =   await getArticlesDetail(route.params.article_id as unknown as number)

                if (resp && resp.status == 200) {
                    let { data } = resp.data
                    article.title = data.title
                    article.nikeName = data.aut_name
                    article.avatar = data.aut_photo
                    article.content = data.content
                    article.publishTime = data.pubdate
                }
            } catch(err) {

        }
        }

        onMounted(( ) => {
            getArticleDetailById()
        } )



        const rockBack = () => {
            store.commit('setActive',store.state.article.isActive)
            router.go(-1)
        }

        return {
            article,
            rtTime,
            rockBack
        }
    }
})
</script>

<style lang="scss" scoped>
    .details-wrap {
        background: #fff;
        ::v-deep .van-cell {
            ::after {
                border-bottom: none;
            }
        }

        .app-nav-bar {
            ::v-deep .details-wrap-left {
                font-size:20px;
            }
            ::v-deep .details-wrap-right {
                font-size:20px;
            }
        }

        .article-auth-info {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top:10px;

            .follow-me {
                min-width: 85px;
            }

            .auth-info-wrap {
                display: flex;
                .auth-info-img {
                    width: 38px;
                    height: 38px;
                }
                .auth-info{
                    display: flex;
                    flex-direction: column;
                    margin-left:10px;

                    .auth-name {
                        color:#848484;
                        font-size: 13px;
                    }
                    .pub-time {
                        color: #b4b4b4;
                        font-size:11px;
                    }
                }

            }
        }
        .article-content-wrap {
            // margin-top: 334px;
          ::v-deep .article-content-info {
                position: fixed;
                left: 0;
                right: 0;
                top: 170px;
                bottom: 1px;
                font-size: 17px;
                overflow-y: auto;
                overflow-x: hidden;
                background: #fff;
                padding: 0 5px 0 5px;

                img {
                    width: 100%;
                }
            }
        }
    }

</style>